import React, { Component,  } from 'react';
import { TabBar } from 'antd-mobile';
import {withRouter} from 'react-router-dom'
class Tabbar extends Component {
    state = {
        selectedTab: 'redTab',
        hidden: false,
        fullScreen: true,
      };
     
  render() {
    return (
      <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#ff2d4a"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          <TabBar.Item
            title="Home"
            key="home"
            icon={<i className="iconfont icon-shouye"></i>
            }
            selectedIcon={
                <i className="iconfont icon-shouye" style={{color:"#ff2d4a"}}></i>
            }
            selected={this.props.location.pathname === "/"}
          
            onPress={() => {
             this.props.history.push("/")
            }}
          
          >
            {this.props.children}
          </TabBar.Item>
          <TabBar.Item
            icon={
             <i className="iconfont icon-leimupinleifenleileibie"></i>
            }
            selectedIcon={
                <i className="iconfont icon-leimupinleifenleileibie" styel={{color:"#ff2d4a"}}></i>
            }
            title="Category"
            key="category"
          
            selected={this.props.location.pathname === "/category"}
            onPress={() => {
                this.props.history.push("/category")
            }}
          
          >
           {this.props.children}
          </TabBar.Item>
          <TabBar.Item
            icon={
                <i className="iconfont icon-gouwuche"></i>
               }
               selectedIcon={
                   <i className="iconfont icon-gouwuche" styel={{color:"#ff2d4a"}}></i>
               }
            title="Cart"
            key="cart"
            
            selected={this.props.location.pathname === "/cart"}
            onPress={() => {
                this.props.history.push("/cart")
            }}
          >
            {this.props.children}
          </TabBar.Item>
          <TabBar.Item
          icon={
            <i className="iconfont icon-wode"></i>
           }
           selectedIcon={
               <i className="iconfont icon-wode" styel={{color:"#ff2d4a"}}></i>
           }
            title="My"
            key="my"
            selected={this.props.location.pathname === "/my"}
            onPress={() => {
                this.props.history.push("/my")
            }}
          >
            {/* {this.renderContent('My')} */}
            {this.props.children}
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
}

export default withRouter(Tabbar);
